<template>
	<view class="page-content">
		<card title="植物郁闭度监测" class="m-card">
			<view class="m-card-content f-content">
				<image class="img" src="../../static/mapMonitor/zw.png" mode="widthFix"></image>
				<view class="flex items">
					<view class="item borders">
						<view class="title">密林</view>
						<view class="value"><text>{{ dataResource.forest }}</text>亩</view>
					</view>
					<view class="item borders">
						<view class="title">中度郁闭</view>
						<view class="value"><text>{{ dataResource.canopyClosure }}</text>亩</view>
					</view>
					<view class="item borders">
						<view class="title">疏林</view>
						<view class="value"><text>{{ dataResource.openForest }}</text>亩</view>
					</view>
				</view>
				<view class="charts-box">
					<view class="flex charts-title">
						<view class="flex-item title">动态变化</view>
						<view class="unit">单位：m²</view>
					</view>
					<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchstart="touchLineA"></canvas>
				</view>
			</view>
		</card>
		<card title="病虫鼠害防治管理" class="m-card">
			<view class="m-card-content">
				<view class="p-content">
					<image class="img" src="../../static/mapMonitor/ch.png" mode="widthFix"></image>
					<view class="items">
						<view class="item">
							<view class="title">虫害</view>
							<view class="value"><text>{{ dataResource.insectPests }}</text>种</view>
						</view>
						<view class="item">
							<view class="title">病害</view>
							<view class="value"><text>{{ dataResource.disease }}</text>种</view>
						</view>
						<view class="item">
							<view class="title">鼠害</view>
							<view class="value"><text>{{ dataResource.rat }}</text>种</view>
						</view>
						<view class="item">
							<view class="title">危害面积</view>
							<view class="value"><text>{{ dataResource.hazardArea }}</text>亩</view>
						</view>
					</view>
				</view>
				<view class="charts-box">
					<view class="flex charts-title">
						<view class="flex-item title">全山病虫害趋势</view>
						<view class="unit">单位：种</view>
					</view>
					<canvas canvas-id="canvasLineB" id="canvasLineB" class="charts" @touchstart="touchLineB"></canvas>
				</view>
			</view>
		</card>
		<card title="苗木养护管理" class="m-card">
			<view class="m-card-content r-content">
				<image class="img" src="../../static/mapMonitor/mmyh.png" mode="widthFix"></image>
				<view class="items">
					<view class="flex flex-middle item">
						<view class="flex-item title">养护人员</view>
						<view class="value">
							<text>{{ dataResource.maintenancePersonnel }}</text>人
						</view>
					</view>
					<view class="flex flex-middle item">
						<view class="flex-item title">养护面积</view>
						<view class="value"><text>{{ dataResource.maintenanceArea }}</text>亩</view>
					</view>
					<view class="flex flex-middle item">
						<view class="flex-item title">灌溉设备</view>
						<view class="value"><text>{{ dataResource.irrigationEquipment }}</text>个</view>
					</view>
					<view class="flex flex-middle item">
						<view class="flex-item title">除草设备</view>
						<view class="value"><text>{{ dataResource.controlEquipment }}</text>个</view>
					</view>
					<view class="flex flex-middle item">
						<view class="flex-item title">肥料</view>
						<view class="value"><text>{{ dataResource.fertilizer }}</text>吨</view>
					</view>
				</view>
			</view>
		</card>
		<card title="生态修复工程管理" class="m-card" v-if="array.length>0">
			<view class="m-card-content r-content">
				<image class="img" src="../../static/mapMonitor/xf.png" mode="widthFix"></image>
				<view class="items">
					<view class="flex flex-middle item">
						<view class="flex-item title">生态工程区域</view>
						<view class="value">
							<picker @change="bindPickerChange" :value="index" :range="array" range-key="condition">
								<view class="uni-input">{{array[index].condition}}</view>
							</picker>
						</view>
					</view>
					<view class="flex flex-middle item">
						<view class="flex-item title">开始时间</view>
						<view class="value"><text>{{ managementData.val1 }}</text></view>
					</view>
					<view class="flex flex-middle item">
						<view class="flex-item title">预计完成时间</view>
						<view class="value"><text>{{ managementData.val2 }}</text></view>
					</view>
					<view class="flex flex-middle item">
						<view class="flex-item title">物联网点位数量</view>
						<view class="value"><text>{{ managementData.val3 }}</text></view>
					</view>
				</view>
			</view>
		</card>
		<card title="生物多样性监测" class="m-card">
			<view class="m-card-content p-content">
				<image class="img" src="../../static/mapMonitor/sw.png" mode="widthFix"></image>
				<view class="items">
					<view class="item">
						<view class="title">植物种类</view>
						<view class="value"><text>{{ dataResource.plantSpecies }}</text>种</view>
					</view>
					<view class="item">
						<view class="title">植物数量</view>
						<view class="value"><text>{{ dataResource.numberPlants }}</text>万颗</view>
					</view>
					<view class="item">
						<view class="title">动物种类</view>
						<view class="value"><text>{{ dataResource.animalSpecies }}</text>种</view>
					</view>
					<view class="item">
						<view class="title">动物数量</view>
						<view class="value"><text>{{ dataResource.numberAnimals }}</text>万只</view>
					</view>
				</view>
			</view>
		</card>
		<card title="生态修复规划" class="m-card" v-if="planArray.length>0">
			<view class="m-card-content r-content">
				<image class="img" src="../../static/mapMonitor/xfgh.png" mode="widthFix"></image>
				<view class="items">
					<view class="flex flex-middle item">
						<view class="flex-item title">待修复区名称</view>
						<view class="value">
							<picker @change="bindPickerChange1" :value="planIndex" :range="planArray" range-key="condition">
								<view class="uni-input">{{planArray[planIndex].condition}}</view>
							</picker>
						</view>
					</view>
					<view class="flex flex-middle item">
						<view class="flex-item title">修复方案推荐</view>
						<view class="value"><text>{{ planData.val1 }}</text></view>
					</view>
					<view class="flex flex-middle item">
						<view class="flex-item title">修复过程监督人</view>
						<view class="value"><text>{{ planData.val2 }}</text></view>
					</view>
					<view class="flex flex-middle item">
						<view class="flex-item title">监督人电话</view>
						<view class="value"><text>{{ planData.val3 }}</text></view>
					</view>
					<view class="flex flex-middle item">
						<view class="flex-item title">修复效果评价</view>
						<view class="value"><text>{{ planData.val4 }}</text></view>
					</view>
				</view>
			</view>
		</card>
		<card title="生态破坏脆弱区分析" class="m-card">
			<view class="m-card-content f-content">
				<image class="img" src="../../static/mapMonitor/sd.png" mode="widthFix"></image>
				<view class="flex items">
					<view class="item borders">
						<view class="title">脆弱区面积</view>
						<view class="value"><text>{{ dataResource.vulnerableArea }}</text>m²</view>
					</view>
					<view class="item borders">
						<view class="title">占总面积比例</view>
						<view class="value"><text>{{ dataResource.totalArea }}</text>%</view>
					</view>
				</view>
				<view class="charts-box">
					<view class="flex charts-title">
						<view class="flex-item title">动态变化</view>
						<view class="unit">单位：%</view>
					</view>
					<canvas canvas-id="canvasLineC" id="canvasLineC" class="charts" @touchstart="touchLineC"></canvas>
				</view>
			</view>
		</card>
	</view>
</template>

<script>
	import card from "@/components/card/card.vue"
	import uCharts from '@/components/u-charts/u-charts.js';
	let _self, canvaLineA, canvaLineB, canvaLineC
	export default {
		data() {
			return {
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,

				date: '2021-02-24',
				startDate: '2021-01-01',
				endDate: '2022-01-01',
				array: [],
				index: 0,
				planArray:[],
				planIndex:0,
				dataResource: '',
				managementData:'',
				planData:''
			}
		},
		components: {
			card
		},
		onLoad() {
			_self = this
			this.cWidth = uni.upx2px(630);
			this.cHeight = uni.upx2px(370);
			this.getData()
		},
		methods: {
			getData() {
				this.$$.request({
					url: this.config.getSzmhs,
					method: "GET",
					data: {}
				}, true, true).then((res) => {
					console.log(res)
					if (res.code == 2000) {
						this.dataResource = res.data
						this.array = res.data.adminlist
						this.planArray = res.data.projectlist
						this.getCanvas(res.data.vegetationMonitoring, this.vegetationCanvas)
						this.getCanvas(res.data.supervisionTreatment, this.pestPreventionCanvas)
						this.getCanvas(res.data.failureAnalysis, this.ecologyCanvas)
						this.getDropDownData(this.array[0].id,this.getManagementData)
						this.getDropDownData(this.planArray[0].id,this.getPlanData)
					}
				}).catch((error) => {
					console.log("程序错误",error.message)
				}).finally(() => {
					console.log("complate")
				})
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.index = e.target.value
				let id = this.array[this.index].id
				this.getDropDownData(id)
			},
			bindPickerChange1: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.planIndex = e.target.value
				let id = this.planArray[this.planIndex].id
				this.getDropDownData(id)
			},
			setLineOption(data) {
				let option = {
					categories: [],
					series: [{
						name: '',
						data: [],
						color: '#F39800'
					}]
				}
				data.forEach((item, index) => {
					option.categories.push(item.timerShaft)
					option.series[0].data.push(item.numericalValue)
				})

				return option
			},
			setDefaultOption(canvasId, chartData) {
				let opts = {
					$this: _self,
					canvasId: canvasId,
					type: 'area',
					fontSize: 11,
					// padding: [0, 15, 10, 15],
					legend: {
						show: false,
						position: 'top',
						float: 'center',
						itemGap: 30,
						padding: 5,
						lineHeight: 18,
						margin: 0,
					},
					dataLabel: false,
					dataPointShape: true,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					xAxis: {
						disableGrid: true,
						type: 'grid',
						gridColor: '#CCCCCC',
						gridType: 'dash',
						dashLength: 8,
					},
					yAxis: {
						gridType: 'solid',
						gridColor: '#E5E5E5',
						dashLength: 8,
						splitNumber: 5,
					},
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						area: {
							type: 'curve',
							opacity: 0.2,
							addLine: true,
							width: 2,
							gradient: false
						},
						"tooltip":{
							"showBox": true,
						}
					}
				}
				// let opt = {
				// 	$this: _self,
				// 	canvasId: canvasId,
				// 	type: 'line',
				// 	fontSize: 11,
				// 	legend: {
				// 		show: false
				// 	},
				// 	dataLabel: false,
				// 	dataPointShape: true,
				// 	background: '#FFFFFF',
				// 	pixelRatio: _self.pixelRatio,
				// 	categories: chartData.categories,
				// 	series: chartData.series,
				// 	animation: true,
				// 	xAxis: {
				// 		disabled: true,
				// 		disableGrid: true,
				// 	},
				// 	yAxis: {
				// 		gridType: 'solid',
				// 		gridColor: '#CCCCCC',
				// 		splitNumber: 5,
				// 		min: min,
				// 		max: max,
				// 		// format:(val)=>{return val.toFixed(0)+'元'}
				// 	},
				// 	width: _self.cWidth * _self.pixelRatio,
				// 	height: _self.cHeight * _self.pixelRatio,
				// 	extra: {
				// 		line: {
				// 			type: 'straight'
				// 		}
				// 	},
				// }
				return opts
			},
			showLineA(canvasId, chartData) {
				let opt = this.setDefaultOption(canvasId, chartData)
				canvaLineA = new uCharts(opt);
			},
			touchLineA(e) {
				canvaLineA.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},
			showLineB(canvasId, chartData) {
				let opt = this.setDefaultOption(canvasId, chartData)
				canvaLineB = new uCharts(opt);
			},
			touchLineB(e) {
				canvaLineB.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},
			showLineC(canvasId, chartData) {
				let opt = this.setDefaultOption(canvasId, chartData)
				canvaLineC = new uCharts(opt);
			},
			touchLineC(e) {
				canvaLineC.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},
			getDropDownData(search, callback) {
				this.$$.request({
					url: this.config.getSearchResult + '/' + search,
					method: "GET",
					data: {}
				}, true, true).then((res) => {
					console.log(res)
					if (res.code == 2000) {
						callback && callback(res.data)
					}
				}).catch((error) => {
					console.log("程序错误",error.message)
				}).finally(() => {
					console.log("complate")
				})
			},
			getCanvas(search, callback) {
				this.$$.request({
					url: this.config.getCanvasData,
					method: "GET",
					data: {
						type: search
					}
				}, true, true).then((res) => {
					console.log(res)
					if (res.code == 2000) {
						callback && callback(res.data)
					}
				}).catch((error) => {
					console.log("程序错误",error.message)
				}).finally(() => {
					console.log("complate")
				})
			},
			vegetationCanvas(data) {
				if (data.length > 0) {
					let opts = this.setLineOption(data)
					this.showLineA('canvasLineA', opts)
				}

			},
			pestPreventionCanvas(data) {
				if (data.length > 0) {
					let opts = this.setLineOption(data)
					this.showLineB('canvasLineB', opts)
				}

			},
			ecologyCanvas(data) {
				if (data.length > 0) {
					let opts = this.setLineOption(data)
					this.showLineC('canvasLineC', opts)
				}
			},
			getManagementData(data){
				this.managementData = data
			},
			getPlanData(data){
				this.planData = data
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #F4F4F4;
	}

	.charts-box {
		.charts-title {
			padding: 30upx 0 10upx;
			font-size: 24upx;

			.title {
				color: #333;
			}

			.unit {
				color: #999;
			}
		}
	}

	.charts {
		width: 630upx;
		height: 370upx;
		background-color: #FFFFFF;
	}

	.page-content {
		padding: 30upx;

	}

	.m-card {
		margin-bottom: 20upx;

		.m-card-content {
			.img {
				display: block;
				margin: 0 auto;
				width: 200upx;
				height: 140upx;
			}
		}

		.p-content {
			position: relative;
			padding: 80upx 0 125upx;
			margin: -30upx 0 -30upx;

			.img {
				width: 292upx;
			}

			.items {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
			}

			.item {
				width: 34%;
				margin-top: 40upx;

				&:nth-child(even) {

					.title,
					.value {
						padding-left: 60upx;
					}
				}

				&:nth-child(odd) {
					padding-left: 30upx;
				}
			}

			.title {
				font-size: 28upx;
				color: #333;
			}

			.value {
				font-size: 28upx;
				color: #999;

				text {
					font-size: 36upx;
					color: #00A0E9;
				}
			}
		}

		.r-content {
			position: relative;

			.grade {
				position: absolute;
				top: 10upx;
				left: 50%;
				font-size: 60upx;
				color: #00DCB0;
				transform: translateX(-50%);
			}

			.flex {
				padding: 0 30upx;
				margin-bottom: 20upx;
				height: 70upx;
				background: #F8F8F8;
				border-radius: 35upx;

				&:last-child {
					margin-bottom: 0;
				}

				.title {
					font-size: 28upx;
					color: #333;
				}

				.value {
					font-size: 28upx;
					color: #999;

					text {
						font-size: 30upx;
					}
				}

				.uni-input::after {
					font-family: iconfont;
					content: '\e659';
					margin-left: 10upx;
					font-size: 24upx;
				}
			}
		}

		.f-content {
			.items {
				justify-content: space-between;
				margin: 0 -7upx;
			}

			.item {
				flex: 1;
				margin: 0 7upx;
				height: 120upx;
				padding-top: 25upx;
				text-align: center;
			}

			.title {
				margin-bottom: 10upx;
				font-size: 28upx;
				color: #333;
			}

			.value {
				font-size: 28upx;
				color: #999;

				text {
					font-size: 36upx;
					color: #00A0E9;
				}
			}
		}

		.v-content {
			.video {
				margin-bottom: 40upx;
				width: 100%;
				height: auto;
			}

			.title {
				font-size: 28upx;
				color: #333;
			}

			.tips {
				font-size: 30upx;
				color: #787C90;
			}

			.title-bar {
				padding: 0 30upx;
				margin-bottom: 20upx;
				height: 70upx;
				background: #F8F8F8;
				border-radius: 35upx;
			}

			.content {
				padding: 20upx 30upx;
				background: #F8F8F8;
				border-radius: 6upx;

				.title {
					margin-bottom: 10upx;
				}
			}
		}
	}
</style>
